<template>
  <div class="sidebar">
    <!-- 顶部 Logo -->
    <div class="logo">
      <img src="../assets/images/USC.png" alt="Logo" />
    </div>

    <!-- 菜单项 -->

    <div class="menu">
      <div
        class="menu-item"
        :class="{ active: activeItem === '漏洞扫描' }"
        @click="selectItem('漏洞扫描')"
      >
        漏洞报告
      </div>
      <div
        class="menu-item"
        :class="{ active: activeItem === '扫描报告' }"
        @click="selectItem('扫描报告')"
      >
        扫描报告
      </div>
      <!-- 其他菜单项 -->
    </div>
  </div>
</template>
<script>
import { selectPage } from "../store/page.js";
import { useRouter } from "vue-router";

const router = useRouter();

export default {
  name: "Sidebar",
  mounted() {
    this.activeItem = selectPage.item;
    this.toPage();
  },
  data() {
    return {
      activeItem: "",
    };
  },
  methods: {
    selectItem(item) {
      this.activeItem = item;
      selectPage.item = item;
      this.toPage();
    },
    toPage() {
      switch (this.activeItem) {
        case "漏洞扫描":
          this.$router.push({
            path: "/",
          });
          break;
        case "扫描报告":
          this.$router.push({
            path: "/info",
          });
          break;
      }
    },
  },
};
</script>

<style scoped>
.sidebar {
  background-color: rgba(52, 59, 102, 1);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.logo {
  padding: 8px;
}
.logo img {
  width: 100%;
  height: auto;
}

.menu {
  font-family: Inter;
  font-size: 20px;
  font-weight: 400;
}

.menu-item {
  color: white;
  padding: 10px;
  cursor: pointer;
  border: 0.5px solid white; /* 上下边框 */
  border-left: none;
  border-right: none;
}

.menu-item.active {
  background-color: rgba(35, 36, 68, 1);
  color: rgba(83, 139, 249, 1);

  border-left: 2px solid rgba(120, 158, 255, 1);
}
</style>
